<template>
    <div class="JobFairInfo">
        <div class="congtainer">
             <div class="lab-title">{{info.jobFairName}}邀请函</div>
            <div class="pages-account-settings-info-main">
                <div class="row jobfair-info-session">
                    <div class="logo row aic"><img v-if="info.banner" :src="BASEURL + info.banner" alt=""></div>
                    <div class="content flex-grow-1 row">
                        <ul>
                            <li>主办单位：{{info.schoolName}}</li>
                            <li>承办单位：{{info.param2}}</li>
                            <li>举办时间：{{info.startTime}} 至 {{info.endTime}}</li>
                            <li>招聘会层次：{{info.education}}</li>
                            <li>招聘会特色：{{info.param}}</li>
                        </ul>
                    </div>
                    <div style="padding: 0 40px; padding-left: 60px; border-left: 1px dashed #bfbfbf;">
                        <div class="iconfont icon-yijieshu" v-if="info.status == 0" style="color: #ccc; transform: scale(.78);-webkit-transform: scale(.78);"></div>
                        <div class="iconfont icon-zhengzaijinxing" v-if="info.status == 1" style="color: red;"></div>
                        <div class="iconfont icon-jijiangkaishi" v-if="info.status == 2" style="color: green;"></div>
                        <el-button @click="handleJoinJobFair" type="primary" style="display: block; margin: 0 auto;">进入会场</el-button>
                    </div>
                </div>
                <el-tabs type="border-card">
                    <el-tab-pane label="邀请函">
                        <div class="lab-title">{{info.jobFairName}}邀请函</div>
                        <div class="context" v-html="info.jobFairDescribe">
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="参会企业">
                          <template>
                            <el-table
                            :data="jobfairappliedList"
                            border
                            style="width: 100%">
                            <el-table-column
                                prop="name"
                                label="公司名称"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="introduce"
                                label="公司简介"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="introduce"
                                label="公司简介"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="执照"
                                label="公司地址">
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="公司地址">
                            </el-table-column>
                            <el-table-column
                            v-if="roleId == '0'"
                            align="right">
                            <template slot-scope="scope">
                                <el-popover
                                placement="right"
                                width="400"
                                trigger="click">
                                <el-table :data="scope.row.jobList">
                                    <el-table-column width="150" property="posName" label="职位名称"></el-table-column>
                                    <el-table-column width="100" property="posNature" label="工作性质"></el-table-column>
                                    <el-table-column width="100" property="posArea" label="工作区域"></el-table-column>
                                    <el-table-column width="100" property="salary" label="薪资标准"></el-table-column>
                                    <el-table-column width="100" property="partment" label="工作部门"></el-table-column>
                                    <el-table-column width="100" property="education" label="学历要求"></el-table-column>
                                    <el-table-column width="100" property="experience" label="工作经验"></el-table-column>
                                    <el-table-column width="100" property="gender" label="性别"></el-table-column>
                                    <el-table-column width="100" property="age" label="年龄"></el-table-column>
                                    <el-table-column width="100" property="wantedNum" label="招聘人数"></el-table-column>
                                    <el-table-column width="100" property="linkman" label="联系人"></el-table-column>
                                    <el-table-column width="120" property="mobile" label="联系电话"></el-table-column>
                                    <el-table-column width="100" property="email" label="电子邮箱"></el-table-column>
                                    <el-table-column width="100" property="createTime" label="发布时间"></el-table-column>
                                    <el-table-column width="100" property="level" label="企业规模"></el-table-column>
                                    <el-table-column width="300" property="address" label="公司地址"></el-table-column>
                                    <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="handleCastResume(scope.$index, scope.row)" type="text" size="small">一键发送</el-button>
                                    </template>
                                    </el-table-column>
                                </el-table>
                                <el-button
                                size="mini"
                                slot="reference"
                                >投递简历</el-button>
                                </el-popover>
                                
                            </template>
                            </el-table-column>
                            </el-table>
                        </template>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

        <!-- 参会确认框 -->
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>您还未参加此招聘会，是否一键报名？</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleJoinJobFair(true)">一键报名</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import { BASEURL } from '@/api/'
export default {
  mounted(){
    this.init();
    console.log(this.roleId);

  },
  methods:{
    async init(){
      let res = await this.$store.dispatch('getJobfairDetail',{id: this.$route.params.id} );
      console.log(res)

      this.info = res.data;
      this.getJobFairAppliedList()
      
    },

    async getJobFairAppliedList(page=this.page){
      let res = await this.$store.dispatch('getJobFairAppliedList',{
          pageNumber: page,
          pageSize: this.number,
          jobFairId: this.$route.params.id,
          appliedStatus: '1',
          display: "1"
      } );
      console.log(res)
      this.jobfairappliedList = res.page.rows;
    },

    async handleCastResume(index,row){
      console.log(index,row);
      let res = await this.$store.dispatch('resumePosted',{
          userId: this.globalUserInfo.userId,
          jobFairId: this.$route.params.id,
          postJobName: row.postJobName,
          comId: row.comId,
          comName: row.comName
        });
      console.log(res)
      if(res.code == 0){
          this.$message.success('投递成功');
      }
    },
    async handleJoinJobFair(apply=false){
      if(this.info.status == 0){
        this.$message.error('该招聘会已结束');
        return;
      }
      if(this.info.status == 2){
        this.$message.error('该招聘会未开始');
        return;
      }
      if(this.roleId == '0'){
          this.$router.push({path: `/videolobby/${this.$route.params.id}/0`})
          return;
      }else if(apply == true){
          let res = await this.$store.dispatch('jobFairAppliedIsApplied', {
            jobFairId: this.$route.params.id,
            userId: this.globalUserInfo.userId,
            roleId: this.roleId,
            comId: this.globalUserInfo.company.comId,
            apply,
          })
          console.log(res)
          
          return;

      }else if(this.roleId == '1'){
          let res = await this.$store.dispatch('jobFairAppliedIsApplied', {
            jobFairId: this.$route.params.id,
            userId: this.globalUserInfo.userId,
            roleId: this.roleId,
            comId: this.globalUserInfo.company.comId,
            apply,
          })
          console.log(res)
          if(res.code == 0){
            this.$router.push({path: `/videolobby/${this.$route.params.id}/1`})
            return;
          }
          if(res.msg !== '企业正在审核中，请耐心等待'){
            this.dialogVisible = true;
          }

      }
      
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
        .then(_ => {
        done();
        })
        .catch(_ => {});
    }
  },
  data(){
      return {
          info: {},
          BASEURL,
          jobfairappliedList:[],
          page: 1,
          number:10,
          dialogVisible: false,
      }
  },
  computed: {
    roleId () {
      return this.$store.state.home.globalUserInfo.roleId
    }, 
    globalUserInfo () {
      return this.$store.state.home.globalUserInfo
    },
  },
}
</script>

<style lang="less">
.JobFairInfo {
    .congtainer {
      padding: 24px;
      background: #f3f8ff;
  }
  .pages-account-settings-info-main {
    width: 100%;
    height: 100%;
    background-color: #fff;
    // display: flex;
    padding-top: 16px;
    padding-bottom: 16px;
    overflow: auto;

    .el-tabs--border-card {
        width: 100%;
    }
  }
  

  .iconfont{
    font-size: 124px;
  }

  .jobfair-info-session {
    padding: 0 15px 15px;
    .logo {
      width: 300px;
      margin-right: 24px;
      img {
        width: 100%;
        // height: 300px;
      }
    }
    .content {
        // border-right: 1px #333 dashed;
        ul{
            margin-top: 10px;
            li{
                line-height: 2.4;
            }
        }
    }
    
  }

  .lab-title {
      text-align: center;
      background: #fff;
      line-height: 2;
      font-size: 16px;
  }
  .context {

  }
}
</style>
